<template>
	<view class="ConfirmOrder">
		<view class="content">
		<navigator open-type="navigate" url="../address/address" class="topnav" :class="!address?'1':'addressone'">
				<view class="itemLeft" >
					<view class="addressnone" v-if="!address_id">
						请选择收货地址
					</view>
					<view class="addressItem" v-else>
						<view class="ItemTitle">
							<view class="ItemName">
								{{address.name}}
							</view>
							<view class="ItemPhone">
								{{address.phone}}
							</view>
						</view>
						<view class="ItemAddress">
							{{address.province+address.city+address.district+address.address}}
						</view>
					</view>
				</view>
				<view class="itemRight"></view>
		</navigator>
			<view class="Item" v-for="(item,i) in Item.goods" :key="i">
				<image :src="item.cover||'@/static/微信图片_20201124091755.png'" mode=""></image>
				<view class="ItemContent">
					<view class="title">{{item.goods_name}}</view>
					<view class="parameter" >
						<view class="parameter1">{{item.option_name}}</view>
					</view>
					<view class="price">￥{{item.price}}</view>
					<view class="ctrlbox">
						X{{item.quantity}}
					</view>
				</view>
			</view>
			<view class="total">
				<view class="totalPrice">
					共{{Item.goods_count}}件商品，小计<text>￥	{{Item.total_fee}}</text>
				</view>
			</view>
			<view class="freight">
				<view class="Left">运费</view>
				<view class="Right">￥{{freight}}</view>
			</view>
			<view class="message borderBottom">
				<view class="Left">买家留言</view>
				<input type="text" v-model="message" placeholder="选填/请输入对本次交易的留言说明"/>
			</view>
			<view class="message background">
				<view class="Left">
					使用优惠券
				</view>
				<view class="item" v-if="coupon_id">
					满{{coupon_id.limit}}减{{coupon_id.amount}}
				</view>
				<view class="radio" :class="radioA==1?1:'radioActive'" @click="youhui"></view>
			</view>
			<view class="message background" v-if="radioA==1">
				<view class="item" v-for=" i in getCoupons.coupons_un" :key="i" @click="Coupon_id(i)"> 
					满{{i.limit}}减{{i.amount}}
				</view>
			</view>
			<view class="message background background1">
				<view class="Left">
					使用积分
				</view>
				<input class="integral" type="text" v-model="point.point" disabled  @click="$linkTo('/pages/spokesman/web_view/web_view?url='+point.point_info)"/>
				<view class="radio" :class="jifen==1?1:'radioActive'" @click="Jifen"></view>
			</view>
		</view>
	<view class="bottomcar savebottom">
					<view class="bottomcontent">
						合计：<text class="price">￥{{Item.total_fee+freight}}</text>
					</view>
						<navigator class="button" @click="Submit">
							结算
						</navigator>
			</view>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import {requestUrl} from '@/common/config.js'
	export default {
		data() {
			return {
				message:'',
				totalprice:"1",
				radioA:0,
				jifen:0,
				integral:'500积分抵5元',
				num:'',
				freight:0,
				Item:[],
				address_id:'',
				address:[],
				access_token:'',
				point:[],
				getCoupons:[],
				coupon_id:''
			};
		},
		onLoad(e) {
			// if(e.add){
			// this.address_id=e.add
			// }else{
			// 	this.address_id=JSON.parse(uni.getStorageSync('address_id')).address_id
			// }
			console.log(e)
		},
		onShow() {
			if(uni.getStorageSync('address_id')){
			   this.address_id=JSON.parse(uni.getStorageSync('address_id')).address_id
			}else if(uni.getStorageSync('content')){
				this.address_id=JSON.parse(uni.getStorageSync('content')).address.address_id
			}
			if(this.freight){
			this.num=this.Item.total_fee+this.freight
			}else{
			this.num=this.Item.total_fee+this.Item.express_fee
			}
			let _this = this 
			let time = Math.round(new Date().getTime() / 1000).toString()
			let Time = ['time', time].join('=')
			let content = ['content=pinet.FeiMao.2017'].join()
			let address_id=['address_id',this.address_id].join('=')
			let Newarr = md5([address_id,content, Time])
			uni.getSystemInfo({
			    success:(res)=>{
					console.log(res)
					this.$request('/app/coupon/getCoupons','post',{
						t:res.model,
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
					}).then(res=>{
						this.getCoupons=res.content
						console.log(this.getCoupons)
					})
				}
			})
			this.$request('/app/user/myPoint','post',{
				access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
			}).then(res=>{
				this.point=res.content
				console.log(this.point)
			})
			uni.request({
				url: requestUrl+'/app/address/getAddress',
				method: "GET",
				data: {
					access_token: JSON.parse(uni.getStorageSync('access_token')),
					time: time,
					sign: Newarr,
					address_id:this.address_id
				},
				success: function(res) {
					_this.address=res.data.content
					_this.address_id=res.data.content.id
					console.log(_this.address)
				}
			});
			let arr = []
			this.Item.goods.map(item => {
				let obj = {}
				obj.goods_id = item.goods_id
				obj.quantity = item.quantity
				arr.push(obj)
			})
			let Arr = JSON.stringify(arr)
			uni.request({
				url: requestUrl+'/app/order/getExpressFee',
				method: "GET",
				data: {
					access_token: JSON.parse(uni.getStorageSync('access_token')),
					time: time,
					sign: Newarr,
					address_id:this.address_id,
					total_fee:this.Item.total_fee,
					data:Arr
				},
				success: function(res) {
					_this.freight=parseInt(res.data.content)
				}
			});
		},
		
		created() {
			this.Item=JSON.parse(uni.getStorageSync('content'))
			this.access_token=JSON.parse(uni.getStorageSync('access_token'))

		},
		methods:{
			// radioAll(){
			// 	this.radioA=!this.radioA
			// },
			Coupon_id(e){
				this.coupon_id=e
				this.jifen=0
				this.radioA=0
			},
			Jifen(){
				if(this.jifen==1){
					this.jifen=0
				}else if(this.jifen==0){
					this.jifen=1
					this.radioA=0
					this.coupon_id=''
				}
				console.log(this.jifen)
			},
			youhui(){
				if(this.radioA==1){
					this.radioA=0
				}else if(this.radioA==0){
					this.radioA=1
					this.jifen=0
				}
				console.log(this.radioA)
			},
			Submit(){
				let arr = []
				this.Item.goods.map(item => {
					let obj = {}
					obj.goods_id = item.goods_id
					obj.option_id = item.option_id
					obj.quantity = item.quantity
					obj.cart_id = item.cart_id
					arr.push(obj)
				})
				let Arr = JSON.stringify(arr)
				let data = ['data', Arr].join('=')
				let _this = this
				let time = Math.round(new Date().getTime() / 1000).toString()
				let Time = ['time', time].join('=')
				let address_id=['address_id',this.address_id].join('=')
				let msg = ['message',this.message].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr1 = [address_id,Arr,Time,msg,].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr1.join('&'))
				
				uni.request({
					url: requestUrl+'/app/order/generate',
					method: "GET",
					data: {
						access_token: JSON.parse(uni.getStorageSync('access_token')),
						time: time,
						sign: newarr,
						address_id:this.address_id,
						comment:this.message,
						data:Arr,
						coupon_id:this.coupon_id.coupon_id,
						point:this.jifen
					},
					success: function(res) {
						uni.setStorage({
						    key: 'order',
						    data: JSON.stringify(res.data.content),
						    success: function () {
						    }
						});
						uni.setStorage({
						    key: 'TotalPrice',
						    data: JSON.stringify(_this.num),
						    success: function () {
						    }
						});
						if (res.data.errcode == 0) {
							uni.redirectTo({
							    url: '../PaymentMethod/PaymentMethod'
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
.ConfirmOrder{
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #F3F4F5;
	.topnav{
		padding: 20rpx 30rpx;
		margin: 20rpx 0 10rpx;
		background: url(@/static/order_adress.png) no-repeat 20rpx 60rpx ;
		background-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		.itemLeft{
			margin-left: 30rpx;
			.addressnone{
				padding: 40rpx 0;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;
			}
	.addressContent{
		flex: 1;
		background-color: #F3F4F5;
		padding-top: 20rpx;
		}
	.addressItem{
		padding: 30rpx;
		background: #fff;
		.Active{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #DB1B22;
			border-radius: 6rpx;
			margin-right: 20rpx;
			padding: 6rpx 14rpx;
		}
		.ItemTitle{
			display: flex;
			margin-bottom: 16rpx;
			align-items: center;
			height: 34rpx;
			.ItemName{
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			.ItemPhone{
				margin-left: 22rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
		}
		.ItemAddress{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9DA5A8;
		}
	}
		}
		.itemRight{
			width: 40rpx;
			height: 40rpx;
			background: url(@/static/direction_right_gray.png) no-repeat 0 0 ;
			background-size: 100% 100%;
		}
	}
	.addressone{
				background: url(@/static/order_adress.png) no-repeat 20rpx 70rpx;
				background-color: #fff;
				    background-size: 16px;
	}
	.content{
		flex: 1;
		overflow-y: scroll;
		.background{
			position: relative;
			flex-flow: wrap;
			.item{
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EA302B;
				background: url(../../pagesA/static/goods_redpacket.png) no-repeat 0px 0rpx;
				background-size: 100% 100%;
				padding: 0px 22rpx;
				margin: 0 10rpx;
				line-height: 40rpx;
			}
			.radio{
				position: absolute;
				right: 30rpx;
				bottom: 36rpx;
				width: 32rpx;
				height: 32rpx;
				background: url(@/static/selected%20active.png) 0px 0px;
				background-size: 100% 100%;
			}
			.radioActive{
				background: url(@/static/selected／on.png) 0px 0px !important;
				background-size: 100% 100% !important;
			}
		}
		.background1{
			.radio{
				right: 30rpx;
				bottom: 43rpx;
			}
		}
		.Item{
			width: 100%;
			height: 220rpx;
			border-bottom: 1px solid #F3F4F5;
			display: flex;
			position: relative;
			padding: 20rpx ;
			box-sizing: border-box;
			background: #fff;
			image{
				width: 180rpx;
				height: 180rpx;
				margin-right: 20rpx;
			}
		}
		.ItemContent{
			flex: 1;
			.title{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			.parameter{
				margin: 10rpx 0;
				display: flex;
				position: relative;
				.parameter1{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9DA5A8;
				}
			}
				.price{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #111111;
				}
				.ctrlbox{
					position: absolute;
					bottom: 20rpx;
					right: 24rpx;
					display: flex;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9DA5A8;
					}
				}
	}
	.total{
		display: flex;
		flex-direction: row-reverse;
		padding: 30rpx 20rpx;
		margin-bottom: 10rpx;
		background-color: #fff;
		.totalPrice{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			line-height: 40rpx;
			text{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #DB1B22;
			}
		}
	}
	.freight{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #F3F4F5;
		background: #fff;
		.Right{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
		}
	}
	.Left{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111111;
		height: 100%;
	}
	.borderBottom{
		margin-bottom: 10rpx;
	}
	.message{
		display: flex;
		padding: 30rpx 20rpx;
		align-items: center;
		background-color: #fff;
		.Left{
			height: 40rpx;
		}

		input{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9DA5A8;
			flex: 1;
			margin-left: 20rpx;
			line-height: 20rpx;
			height: 40rpx;
			min-height: 40rpx;
		}
		.integral{
			margin-right: 60rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9DA5A8;
			flex: 1;
			margin-left: 20rpx;
			line-height: 20rpx;
			height: 60rpx;
			min-height: 40rpx;
		}
	}
	.bottomcar{
		width: 95%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background-color: #fff;
		.bottomcontent{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			display: flex;
			align-items: center;
			.price{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #DB1B22;
				margin: 0 10rpx;
			}
			.freight{
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}

		}
		.button{
			padding: 12rpx 60rpx;
			background: #DB1B22;
			border-radius: 36px;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 30rpx;
		}
	}
	.savebottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

}
</style>
